import React from 'react'
import { Panel, Tab, TabBody, Cell, CellHeader, CellsTitle, CellBody, CellFooter, MediaBox, MediaBoxHeader,
		 MediaBoxDescription, MediaBoxTitle, MediaBoxBody, Button, Form, FormCell, Radio, PanelHeader, PanelBody, PanelFooter } from 'react-weui'
import { browserHistory } from 'react-router'
import Title from '../ReuseTitle'
import Item from './OrderItem'
import { connectOrder } from '../../container/order/connectOrder'

class OrderPreview extends React.Component {
	constructor(props) {
		super(props)
		this.state = {
			goodsList: [],
			previewed: true,
			fetched: false,
			pay: 0,
			visible: false,
			address: '',
			addressId:''
		}
    }
    componentWillMount() {
        const session = localStorage.getItem('session');
        const isAuth = localStorage.getItem('isAuthenticated');
        if(!session || !isAuth) {
            browserHistory.push(`/store/${this.props.params.storeId}/user/login`);
        }
    }
    componentDidMount(){
		this.props.addressActions.fetchAddress();
        this.setState({
        	fetched: true
        })
	}
    componentWillReceiveProps(nextProps) {
		if(nextProps.order.isPreviewed == true && this.state.previewed == true){
			this.setState({
				goodsList: nextProps.order.orderPreview.goods,
				previewed: false,
				pay: nextProps.order.orderPreview.sum
			})
		}
		if(nextProps.address.isFetched == true && this.state.fetched == true){
			var defaultAdd = nextProps.address.addressData.filter(function(item){
				if(item.is_default==1){
					return item
				}
			});
			this.setState({
				fetched: false,
				addressId: defaultAdd[0].addressId,
				address: defaultAdd[0].p_name + defaultAdd[0].c_name + defaultAdd[0].d_name + defaultAdd[0].content
			})
		}
    }
    handlePay() {
		const storeId = this.props.params.storeId;
        browserHistory.push(`/store/${storeId}/user/pay`);
        var cartIds = this.state.goodsList.map(function(item,i){
        	return item.cartId;
        });
        this.props.orderActions.createOrder(cartIds,this.state.addressId)
	}
	showAddress(){
		this.setState({
			visible: true
		})
	}
	hideAddress(){
		this.setState({
			visible: false
		})
	}
	selectAddress(addressId,p_name,c_name,d_name,content){
		this.setState({
			addressId: addressId,
			address: p_name + c_name + d_name + content
		})
	}
	render() {
		const { goodsList } = this.state
		const { addressData } = this.props.address
		return (
            <div>
            { this.state.visible ?
                <div>
                	<Panel style={{ position: 'fixed', top: 0, width: '100%', zIndex: 2 }}>
		            	<Cell>
			                <CellHeader>
		                        <i className="iconfont icon-back" style={{
		                            fontSize: '1.4em',
		                            color: 'gray'
		                        }} onClick={this.hideAddress.bind(this)}></i>
			            	</CellHeader>
		               		<CellBody style={{ textAlign: 'center'}}>
		                        选择收货地址
		                	</CellBody>
		            	</Cell>
		            </Panel>
		            <Form style={{
						marginTop: '55px'
					}} radio>
		            	{
		            		addressData.map(function(item,i){
								return(
										<Panel key={i}>
											<PanelHeader>
												<span>{item.name}</span><span style={{ float: 'right'}}>{item.phone}</span>
											</PanelHeader>
											<PanelFooter href="javascript:void(0);">
												<FormCell radio>
										  			<Cell onClick={this.selectAddress.bind(this,item.addressId,item.p_name,item.c_name,item.d_name,item.content)} >
									                    <CellBody>{item.p_name+' '+item.c_name+' '+item.d_name+' '+item.content}</CellBody>
									                    <CellFooter>
									                        <Radio name={item.userId} value={item.addressId} defaultChecked={item.addressId==this.state.addressId?true:false} />
									                    </CellFooter>
						                     		</Cell>
						                		</FormCell>
											</PanelFooter>
						                </Panel>
									)
		            	},this)}
		            </Form>
		            <Panel style={{
							position: 'fixed',
							bottom: '0',
							width: '100%',
							textAlign: 'center',
							padding: '18px 0 18px 0',
							borderTop: '1px solid #ccc'
						}}>
			                 <Button type='primary' style={{
			                 	width: '90%',
			                 	marginTop: '10px'
			                 }} onClick={this.hideAddress.bind(this)}
			                >确定</Button>
						</Panel>
                </div>:
                <div>
                	<Title title="确认订单" name="preview" storeId={this.props.params.storeId} />
	                <Cell access style={{
						marginTop: '55px',
						background: '#105069',
						color: '#fff'
					}} onClick={this.showAddress.bind(this)} >
		                <CellBody>
		                   选择的地址是：{this.state.address}
		                </CellBody>
		                <CellFooter />
		            </Cell>
	                <Tab>
		                <TabBody style={{ marginTop: '1px', marginBottom: '10px' }}>
							{
								goodsList.map(function(item,i){
									return(
										<MediaBox key={i} type="appmsg" href="javascript:void(0);">
										<MediaBoxHeader><img src={'http://'+item.goodsThumb} /></MediaBoxHeader>
										<MediaBoxBody>
											<MediaBoxTitle>{item.goodsName}</MediaBoxTitle>
											<MediaBoxDescription>
												<div>
												&nbsp;单价：
													<span>{item.goodsPrice}</span>
				                                &nbsp;数量：
				                                	<span>{item.goodsNum}</span>
				                                </div>
				                                <div>
				                                &nbsp;颜色：
					                                <span>{
					                                	item.colorInfo==null ? '默认':
					                                	item.colorInfo.colorName
					                                }</span>
				                                &nbsp;尺寸：
					                                <span>{
					                                	item.sizeInfo==null? '默认':
					                                	item.sizeInfo.sizeName
					                                }</span>
				                                </div>
				                                <div>
				                                &nbsp;合计：
				                                	<span>
				                                		¥{item.goodsNum*item.goodsPrice}
				                                	</span>
				                                </div>
											</MediaBoxDescription>
										</MediaBoxBody>
									</MediaBox>
										)
								})
							}
		                </TabBody>
		                <Panel style={{
							position: 'fixed',
							bottom: '0',
							width: '100%',
							textAlign: 'center',
							padding: '18px 0 18px 0',
							borderTop: '1px solid #ccc'
						}}>
			                 <p>支付总额：<span style={{ color: 'orange' }}>￥{this.state.pay}</span></p>
			                 <Button type='warn' style={{
			                 	width: '90%',
			                 	marginTop: '10px'
			                 }} onClick={this.handlePay.bind(this)}
			                >微信支付</Button>
						</Panel>
		            </Tab>
	            </div>}
            </div>
		);
	}
}
export default connectOrder(OrderPreview)